import React, { Component } from 'react';
import axios from 'axios';

var bus = {     //订阅者发布者控制中心
  list:[],
  subscribe(callback){   //callback是个函数
    this.list.push(callback)
  },
  publish(value){
    this.list.forEach(callback =>
      callback&&callback(value))
  }
}

class Film extends Component {
  render() {
      let {name,detail} = this.props
    return (
      <div>
          <span onClick={()=>{
            bus.publish(detail)    //发布者模式
          }}>{name}</span>
      </div>
    )
  }
}

export default class App extends Component {
    constructor(){
    super();
      this.state = {
        list:[]
      }
      axios({
          url:'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=3889594',
          headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233"}',
            'X-Host': 'mall.film-ticket.film.list'
          }
      }).then(res =>{
          this.setState({
              list:res.data.data.films
          })
          console.log(res.data.data.films)
      })

  }
  render() {
    return (
      <div>
          {
            this.state.list.map((item)=>
              <Film key={item.filmId} name={item.name} detail={item.synopsis}></Film>
            )
          }
          <Film2 detail={this.state.detail}></Film2>
      </div>
    )
  }
}



class Film2 extends Component {
  constructor(){
    super();
    this.state={
      detail:''
    }
    bus.subscribe((detail)=>{     //订阅者模式
      this.setState({
        detail:detail
      })
    })
  }
  render() {
    return (
      <div style={{
          background:'yellow',
          position:'fixed',
          right:0,
          width:'300px',
          height:'300px'
      }}>{this.state.detail}</div>
    )
  }
}

